<template>
  <div>
    <pt-search :params="params" :config="config" label-width="110px" @search="search"/>
    <pt-table
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      @selection-change="selectionChange"
      :fetch="getTableList"
      :pagination="pagination">
      <!-- <el-button type="primary" plain :disabled="selectionId.length === 0" size="small" round @click="openPass()">批量通过</el-button> -->
      <el-button type="primary" :disabled="selectionId.length === 0" round size="small" @click="closePass()">批量驳回</el-button>
    </pt-table>
    <el-dialog title="商家入驻信息" v-dialogDrag :visible.sync="dialogTableVisible" width="800px">
      <bus-msg :curData="curData" @openPass="openPass" @closePass="closePass" />
    </el-dialog>
    <el-dialog title="审核补充信息" v-dialogDrag :visible.sync="dialogPass" width="600px">
      <el-form :model="matForm" ref="ruleForm" label-position="right" size="small" label-width="110px">
       <el-form-item label="所属BD(选填)">
          <el-select style="width: 230px" v-model="matForm.bdid" filterable placeholder="--所属BD--">
            <el-option v-for="items in businessDevelopmentList" :key="'businessDevelopmentList'+items.id" :label="items.name" :value="items.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="抽佣比例" prop="coefficient" :rules="[{required: true, message: '抽佣比例未填', trigger: 'blur'}]">
          <el-input-number v-model="matForm.coefficient" :min='0' :max='100' :precision='1' /> %
        </el-form-item>
        <el-form-item label="提现周期" prop="period" :rules="[{required: true, message: '提现周期未填', trigger: 'blur'}]">
          <el-input-number v-model="matForm.period" :min='0' :max='1000' :precision='0' /> 天
        </el-form-item>
        <el-form-item label="最低提现" prop="minmonety" :rules="[{required: true, message: '最低提现额度未填', trigger: 'blur'}]">
          <el-input-number v-model="matForm.minmonety" :min='0' :max='10000' :precision='2' /> 元
        </el-form-item>
        <el-form-item label="抽点方式" required>
          <el-radio v-model="matForm.drawmode" :label="1">打折前</el-radio>
          <el-radio v-model="matForm.drawmode" :label="0">打折后</el-radio>
        </el-form-item>
        <el-form-item v-if="centerRow.isdeliver === 1" label="自配送区域" prop="bdistrange" :rules="[{required: true, message: '配送区域未绘制', trigger: 'change'}]">
          <el-button size="mini" @click="cavMap()">{{matForm.bdistrange ? '查看':'添加'}}配送区域</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPass = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitPass('ruleForm')">通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { businessEnteringList, batchCheck, batchReject, businessDevelopment } from '@/api/busnt'
  import busMsg from './components/bus-msg'
  export default {
    components: { busMsg },
    inject: ['updateSumTotal'],
    data() {
      return {
        columns: [ // 表单配置
          { prop: "name", label: "门店名称",  minWidth: 140, align: "left" },
          { prop: "bossName", label: "联系人", minWidth: 100, align: "left" },
          { prop: "mobile", label: "联系电话", minWidth: 100, align: "left" },
          { prop: "createtime", label: "申请时间", minWidth: 140, align: "left" },
          { label: "位置", minWidth: 140, align: "left",
            render: row => {
              return <span>{row.provinceName + row.cityname+row.countyname+row.address}</span>
            }
          },
          { label: "所属区域", minWidth: 100, align: "left",
            render: row => {
              return <span>{row.flag === 2 ? row.agentname : ''}</span>
            }
          },
          { label: "配送方式", minWidth: 100, align: "left",
            render: row => {
              return <span>{row.isdeliver === 1 ? '商家自配送' : '平台配送'}</span>
            }
          },
          { button: true, label: "操作", width: 180, fixed: 'right',
            group: [
              { name: "查看/审核", type: "text", style: { color: '#03A9F4'}, onClick: row => this.handleClick(row) },
              { name: "通过", type: "text", style: { color: '#8BC34A'}, onClick: row => this.openPass(row) },
              { name: "驳回", type: "text", onClick: row => this.closePass(row) },
            ]
          }
        ],
        pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
        options: { // 表单外观
          mutiSelect: true, //  多选则 mutiSelect
          index: false, // 显示序号
          loading: false, // 表格动画
          initTable: true // 是否一挂载就加载数据
        },
        tableData: [], //表单数据
        config: [
          { key: "agentIds", type: "agentList", label: "区域" },
          { key: "name", type: "input", label: "商家搜索", placeholder: "请输入关键字、手机号" },
          { key: "page", type: "button",
            group: [
              { name: "查看", type: "primary", onClick: () => { } },
              { name: "重置",  type: "info", onClick: () => this.reset() }
            ]
          }
        ],
        params: {
          agentIds: [], //区域
          page: 0,
          size: 10,
          mobile: '',
          name: ''
        },
        dialogTableVisible: false, // 商家入驻详情弹窗
        curData: {}, // 被操作的列表条目
        selectionId: [], // 批量操作
        isPassAll: false, // 批量操作通过标记
        matForm: {
          bdid: null,
          coefficient: undefined,
          period: undefined, //提现周期
          minmonety: undefined,//最低提现
          packtime: undefined, //打包时间
          drawmode: 1, //抽点
          bdistrange: ''
        },
        centerRow: {}, // 被选中的列表
        businessDevelopmentList: [], // BD
        submitLoading: false, // 审核等待
        dialogPass: false // 审核通过
      }
    },
    methods: {
      search() { // 搜索
        this.pagination.curPage = 1
        this.pagination.page = 0
        this.getTableList()
      },
      reset() { // 重置
        this.pagination.curPage = 1
        for (const key in this.params) {
          if (key === "page") {
            this.pagination.page = 0
          } else if (key === "size") {
            this.pagination.size = 10
          } else if (key === "agentIds") {
            this.params[key] = [];
          } else {
            this.params[key] = ""
          }
        }
        this.getTableList()
      },
      selectionChange(rowList) { // 多选
        this.selectionId = rowList.length ? rowList.map(i => i.id) : []
      },
      handleClick(row) { //查看/修改订单操作
        this.dialogTableVisible = !this.dialogTableVisible
        this.curData = row
      },
      openPass(row) { // 打开审核通过弹窗
        // this.isPassAll = row ? false : true
        this.matForm = this.$options.data().matForm
        this.centerRow = row
        this.getBusinessDevelopmentList(row.agentid)
        if (!this.dialogTableVisible) this.curData = row
        this.dialogPass = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
        })
      },
      closePass(row) { // 打开审核拒绝弹窗
        let id = ''
        if (row) id = row.id
        else id = this.selectionId.join(',')
        this.$prompt('请输入驳回原因', '驳回入驻申请！', {
          confirmButtonText: '驳回让修改',
          cancelButtonText: '取消',
          inputPattern: /^[\S\n\s]{0,500}$/,
          inputErrorMessage: '最多输入500个字符'
        }).then(({ value }) => {
          this.submitError(id, value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      submitError(ids1, failurereason) { // 驳回
        this.options.loading = true
        batchReject({ ids1, failurereason }).then(res => {
          if (res.success) {
            this.$message.success('驳回成功！')
            this.updateSumTotal()
            this.getTableList()
          }
        }).finally(() => { this.options.loading = false })
      },
      submitPass(formName) { // 提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.matForm }
            params.ids1 = this.isPassAll ? this.selectionId.join(',') : this.curData.id
            params.bdname = ''
            if (params.bdid) params.bdname = this.businessDevelopmentList[this.businessDevelopmentList.findIndex(i => i.id === params.bdid)].name
            this.submitLoading = true
            batchCheck(params).then(res => {
              if (res.success) {
                this.$message.success('审核成功！')
                this.dialogPass = false
                if (this.dialogTableVisible) this.dialogTableVisible = false
                this.updateSumTotal()
                this.getTableList()
              }
            }).finally(() => { this.submitLoading = false })
          }
        })
      },
      cavMap() { // 绘制地图
        const option = {
          bdistrange: this.matForm.bdistrange,
          searchName: '',
          lng: this.centerRow.longitude,
          lat: this.centerRow.latitude
        }
        this.$cavGdMap(option, res => {
          this.matForm.bdistrange = res
        })
      },
      getBusinessDevelopmentList(agentId) { // 获取BD数据
        businessDevelopment({ agentId }).then(res => {
          if (res.success) {
            this.businessDevelopmentList = res.data
          }
        })
      },
      getTableList() { //获取订单数据
        this.options.loading = true
        const params = { ...this.params }
        params.page = this.pagination.page
        params.size = this.pagination.size
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(",") : ""
        businessEnteringList(params).then(res => {
          if (res.success) {
            this.tableData = res.data.list
            this.pagination.total = res.data.total
          }
        }).finally(() => { this.options.loading = false })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
